<template>
	<view class="container">
		<!-- 顶部视频播放器 -->
		<view class="video-container">
			<video v-show="videoData.videoUrl" id="myVideo" class="video-player" :src="videoData.videoUrl"
				:poster="poster" autoplay :controls="false" object-fit="cover" @play="onVideoPlay" @error="onVideoError"></video>
			<image v-show="!videoData.videoUrl" class="video-player" :src="videoData.srcImgUrl" mode="aspectFill"></image>
		</view>

		<!-- 视频文案 -->
		<view class="video-info">
			<view class="video-desc">{{ videoData.text }}</view>
			<view class="video-meta">
				<text>生成时间: {{ videoData.createTime }}</text>
				<!-- 状态标签 -->
				<view class="flex justify-end">
					<u-tag :text="getStatusText(videoData.createStatus)" :type="getStatusType(videoData.createStatus)" size="mini" plain
						class="status-tag" />
					<view v-if="videoData.isDefault" class="ml-10">
						<u-tag text="默认" type="primary" size="mini" plain
							class="status-tag" />
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<view class="flex back-btn">
				<u-button @click="goBackBtnClick" icon="arrow-left">
					返回
				</u-button>	
			</view>
			<view class="default-btn">
				<u-button type="primary" @click="setAsDefault">
					设为默认
				</u-button>
			</view>
			<view class="delete-btn">
				<u-button type="error" icon="close" @click="deleteVideo">
					删除
				</u-button>
			</view>
		</view>
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				poster: null,
				videoData: {
					id: 1,
					videoUrl: '',
					createTime: '',
					isDefault: false
				},
				videoContext: null
			}
		},
		onLoad(option) {
			try {
				if (option && option.id) {
					if (option.videoUrl) {
						this.poster = option.videoUrl + "?x-oss-process=video/snapshot,t_0,f_jpg,w_512,h_512,m_fast"
					}
					this.depot.get(api.aiCard("aiVideo/findOne?id=" + option.id))
					.then((res) => {
						if (res && res.data && res.data.data) {
							this.videoData = res.data.data;
							this.poster = this.videoData.videoUrl ? this.videoData.videoUrl + "?x-oss-process=video/snapshot,t_0,f_jpg,w_512,h_512,m_fast" : this.videoData.srcImgUrl;
						} else {
							throw new Error("数字人信息加载失败")
						}
					})
				} else {
					throw new Error("数字人信息加载失败")
				}
			} catch (e) {
				this.$refs.toast.show({
					type: "error",
					title: "提示",
					message: "数字人信息加载失败"
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}

		},
		onReady() {
			// 获取视频上下文
			this.videoContext = uni.createVideoContext('myVideo', this)
			// 自动播放视频
			this.playVideo()
		},
		methods: {
			// 播放视频
			playVideo() {
				if (this.videoContext) {
					this.videoContext.play()
				}
			},

			// 视频开始播放回调
			onVideoPlay() {
				console.log('视频开始播放')
			},

			// 视频播放错误回调
			onVideoError(e) {
				console.error('视频播放错误:', e)
				uni.showToast({
					title: '视频播放失败',
					icon: 'none'
				})
			},

			// 设为默认
			setAsDefault() {
				uni.showModal({
					title: '提示',
					content: '确定要将此数字人设为默认数字人吗？',
					success: async (res) => {
						if (res.confirm) {
							this.videoData.isDefault = true;
							uni.showLoading({
								title: '设置中...'
							})
							
							await this.depot.get(api.aiCard("aiVideo/setDefault?id=" + this.videoData.id))
							uni.hideLoading()
							uni.showToast({
								title: '设置成功',
								icon: 'success'
							})
							uni.$emit("setDefaultAiVideoSuccess", this.videoData.id);
							
						}
					}
				})
			},

			// 删除视频
			deleteVideo() {
				uni.showModal({
					title: '警告',
					content: '确定要删除此数字人吗？删除后不可恢复',
					success: async (res) => {
						if (res.confirm) {
							// 模拟删除操作
							uni.showLoading({
								title: '删除中...'
							})
							
							await this.depot.get(api.aiCard("aiVideo/deleteAiVideoById?id=" + this.videoData.id))
							uni.hideLoading()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							uni.$emit("deleteAiVideoSuccess", this.videoData.id);
							
							// 返回上一页
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					}
				})
			},
			goBackBtnClick() {
				uni.navigateBack()
			},
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'IN_PROCESS': '处理中',
					'DONE': '已生成',
					'FAIL': '失败'
				}
				return statusMap[status] || '未知'
			},
			
			// 获取状态标签类型
			getStatusType(status) {
				const typeMap = {
					'IN_PROCESS': 'warning',
					'DONE': 'success',
					'FAIL': 'error'
				}
				return typeMap[status] || 'info'
			},
		}
	}
</script>

<style lang="less" scoped>
	// 定义变量
	@primary-color: #2979ff;
	@error-color: #fa3534;
	@text-color: #606266;
	@border-color: #e4e7ed;
	@bg-color: #fff;

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: @bg-color;
	}

	.video-container {
		position: relative;
		width: 100%;
		padding-top: 100%; // 1:1正方形比例
		background-color: #fff;

		.video-player {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	.video-info {
		padding: 30rpx;
		background-color: #fff;
		height: calc(100vh - 100vw - 150rpx);
		overflow-y: auto;
		.video-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.video-desc {
			font-size: 28rpx;
			color: @text-color;
			line-height: 1.6;
			margin-bottom: 30rpx;
		}

		.video-meta {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;
		}
	}

	.action-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 12rpx 0 rgba(0, 0, 0, 0.05);

		.default-btn {
			flex: 1;
			margin-right: 20rpx;
		}
		.delete-btn {
			width: 180rpx;
		}
		.back-btn {
			width: 180rpx;
			margin-right: 20rpx;
		}

		/deep/ .u-btn {
			height: 80rpx;
		}
	}
</style>